<template>
	<view>
		<view class="content">
			<z-paging ref="paging" v-model="tableData" @query="queryList" :topZIndex="99999" :bottomZIndex="999999">
				<template #top>
					<u-navbar :fixed="false" leftIcon=" " title="原料出库" :autoBack="false" :safeAreaInsetTop="true">
						<view class="u-nav-slot" slot="right">
							<m-capsule></m-capsule>
						</view>
					</u-navbar>

					<view class="SearchBox">
						<u-search :showAction="true" v-model="searchValue" placeholder="请搜索关键字" shape="square"
							actionText="搜索" @search="OnSearch" @custom="OnSearch" :actionStyle="{color:'#fff'}"
							:animation="false">
						</u-search>
					</view>

					<view class="TabsBox">
						<m-scroll-tag @tabChange="changeTab" :tagsList="navTabsStatus" bgColor="#52b583">
							<view slot="right">
								<view class="IconBoxs x-f">
									<view class="x-end">
										<uni-icons fontFamily="CustomFontPlatform"
											style="margin-left: 14px;font-weight: 600;" color="#999" @click="OpenFilter"
											:size="20">{{$utils.toUniCode('&#xe628;')}}</uni-icons>

										<text style="zoom: .7;color: #999;font-weight: 600;">{{FilterNums}}</text>
									</view>
								</view>
							</view>
						</m-scroll-tag>
					</view>
				</template>

				<view style="padding: 10px;">
					<view class="content_main_CardBox" style="margin-bottom: 10rpx;position: relative;"
						v-for="(item,index) in tableData" :key="index" @click="openInfo(item)">

						<uni-icons v-if="item.ApproveID" fontFamily="CustomFontPlatform" color="#a3e8c3" size="100rpx"
							style="position: absolute;right: 10px;top: 10px;">{{$utils.toUniCode('&#xeda6;')}}</uni-icons>


						<!-- <view class="x-f">
							<view style="font-size: 16px;font-weight: 600;">{{item.ReportNum}}</view>
						</view> -->

						<view class="Card_Form">
							<m-field label="单据编号" labelFontSize="14px" labelWidth="80px" paddings="12rpx 0"
								:borderBottom="true" borderColor="#f4f4f4">
								<template #custom-value>
									<view style="font-size: 14px;">{{item.FCode}}</view>
								</template>
							</m-field>
							<m-field label="单据日期" labelFontSize="14px" labelWidth="80px" paddings="12rpx 0"
								:borderBottom="true" borderColor="#f4f4f4">
								<template #custom-value>
									<view style="font-size: 14px;">{{item.FDate}}</view>
								</template>
							</m-field>
							<m-field label="出库仓库" labelFontSize="14px" labelWidth="80px" paddings="12rpx 0"
								:borderBottom="true" borderColor="#f4f4f4">
								<template #custom-value>
									<view style="font-size: 14px;">{{item.FWarehouseName}}</view>
								</template>
							</m-field>
							<m-field label="制单人" labelFontSize="14px" labelWidth="80px" paddings="12rpx 0"
								:borderBottom="true" borderColor="#f4f4f4">
								<template #custom-value>
									<view style="font-size: 14px;">{{item.Creater}}</view>
								</template>
							</m-field>

						</view>
					</view>
				</view>


				<template #bottom>
					<zdy-tabbar style="width: 100%;" :current-page="currentID"></zdy-tabbar>
				</template>


				<!-- 悬浮按钮_新增 -->
				<m-drag-button :style="{ opacity: BtnShow ? 1 : 0, }" :isDock="true" :existTabBar="true"
					:initialBottom="80" @btnClick="ToAddPageBtn">
					<template #BtnContent>
						<u-icon name="plus" color="#fff" size="54rpx"></u-icon>
					</template>
				</m-drag-button>
			</z-paging>
		</view>

		<u-popup class="MainPopup" :show="FilterPopup" mode="right" :round="12" @close="closeFilterPopup">

			<view class="f-dc" style="width: 80vw;height: 100vh;">
				<u-navbar :fixed="false" title="筛选" :autoBack="false" leftIcon=" " :safeAreaInsetTop="true"
					leftIconColor="#fff" style="width: 100%;">
					<view class="u-nav-slot" slot="right">
						<uni-icons color="#fff" type="close" size="30" @click="closeFilterPopup"></uni-icons>
					</view>
				</u-navbar>


				<view class="MainBox f-dc FilterMainBox">
					<view class="TitleBox">
						<!-- <view style="font-size: 14px;">单据日期</view> -->

						<m-field labelFontSize="14px" paddings="12rpx 0" :borderBottom="false" label="【单据日期】">
						</m-field>



						<m-field labelFontSize="14px" labelWidth="80px" paddings="12rpx 0" :borderBottom="true"
							label="开始时间:">
							<template v-slot:custom-value>
								<view class="flex_center_vertical" @click="ChoiceTime('start')">
									<text v-if="FilterFormData.StartTime"
										class="Date_Text">{{dateFormat(FilterFormData.StartTime)}}</text>

									<text v-else style="font-size: 12px;color: #999;">请选择</text>
								</view>
							</template>
						</m-field>

						<m-field labelFontSize="14px" labelWidth="80px" paddings="12rpx 0" :borderBottom="true"
							style="margin-top: 10rpx;" label="结束时间:">
							<template v-slot:custom-value>
								<view class="flex_center_vertical" @click="ChoiceTime('end')">
									<text v-if="FilterFormData.EndTime"
										class="Date_Text">{{dateFormat(FilterFormData.EndTime)}}</text>

									<text v-else style="font-size: 12px;color: #999;">请选择</text>
								</view>
							</template>
						</m-field>


					</view>
				</view>



				<view class="PopupBottomBox x-f" :style="$utils.disposeSafeBottomFun()">
					<button @click="ResetFilterBtn">重置</button>
					<button @click="ComfirmFilterBtn">筛选</button>
				</view>
			</view>
		</u-popup>

		<!-- 时间选择器 -->
		<u-datetime-picker class="DateTimerPick" ref="datetimePicker" :title="PickerTitle" :show="showTimePicker"
			v-model="DatetimeData" mode="date" :closeOnClickOverlay="true" @close="ClosePicker" @cancel="ClosePicker"
			@confirm="ConfirmTime" :formatter="formatter"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				APFunName: '',
				EmpleType: 1, // 人员类型
				currentID: null,
				searchValue: '',
				searchData: {
					value: '',
					name: '全部'
				},
				navTabsStatus: [{ // Tab数据
					name: '全部',
					value: ''
				}, {
					name: '未审核',
					value: 0
				}, {
					name: '已审核',
					value: 1
				}],
				TabTimer: null, // Tab切换的防抖
				FilterPopup: false,
				FilterFormData: {
					StartTime: '',
					EndTime: '',
				},
				PickerTitle: '',
				FilterNums: null, // 筛选项数量
				showTimePicker: false, // 时间选择器弹层显示
				DatetimeData: '',
				pageNo: 1,
				tableData: [],
				BtnShow: false, // 按钮样式初始化有问题，等加载完再显示
			};
		},
		onLoad(option) {
			var that = this;
			console.log(option);

			this.currentID = +option.TabbarID;
			this.EmpleType = +option.id;
			this.APFunName = option.APFunName;
			// if (!that.$utils.isEmpty(option)) {
			// 	this.currentID = +option.TabbarID;
			// } else {
			// 	this.currentID = 0;
			// }
		},
		mounted() {
			let that = this;

			that.$nextTick(() => {
				setTimeout(() => {
					that.BtnShow = true;
				}, 500)
			});

			uni.$on('refresh_RawMaterialsCK', function(ret) {
				// console.log(123);
				that.refreshToPage();
			})



		},
		onUnload() {
			uni.$off('refresh_RawMaterialsCK')
		},
		methods: {
			refreshToPage() {
				let that = this;
				setTimeout(() => {
					that.$refs.paging.reload();
				}, 300);
			},
			changeTab(item) { // 切换tab任务
				let that = this;
				this.searchData.value = item.data.value;

				clearTimeout(that.TabTimer);
				that.TabTimer = setTimeout(() => {
					// that.OnSearch();
					that.$refs.paging.reload();
				}, 300)
			},
			queryList(pageNo) {
				let that = this;
				// that.$refs.paging.complete([]);

				that.$utils.showLoading();
				this.pageNo = pageNo;

				let obj = {
					SearchKey: this.searchValue,
					pageIndex: pageNo,
					pageSize: 30,
					FBdate: this.dateFormat(this.FilterFormData.StartTime),
					FEdate: this.dateFormat(this.FilterFormData.EndTime),
					EquipmentID: 0,
					Approve: this.searchData.value,
					searchValue: this.searchValue
				}
				that.Request.request('GKJ_YLCK_List', obj, function(ret) {
					if (ret.status == 200) {
						console.log(ret)
						that.$refs.paging.complete(ret.data.ds);


						that.$utils.hideLoading();
						that.$forceUpdate();
					} else {
						that.$refs.paging.complete([]);
					}
				})

			},
			OnSearch() {
				this.$refs.paging.reload();
			},
			ToAddPageBtn() {
				uni.navigateTo({
					url: './RawMaterialsCKDetail'
				})
			},
			openInfo(data) {
				uni.navigateTo({
					url: `./RawMaterialsCKDetail?FStockID=${data.FStockID}`
				})
			},
			formatter(type, value) { // 时间选择器数据格式化
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},
			ClosePicker() { // 关闭时间选择器
				this.DatetimeData = Number(new Date());
				this.showTimePicker = false;
			},
			ConfirmTime(data) { // 确认时间

				if (this.TimeType == 'start') {

					if (!this.Request.isEmpty(this.FilterFormData.EndTime) && Number(data.value) > Number(this
							.FilterFormData
							.EndTime)) {
						return uni.showToast({
							title: '开始时间不能高于结束时间',
							icon: 'none'
						});
					}

					this.FilterFormData.StartTime = data.value;
				} else if (this.TimeType == 'end') {
					if (!this.Request.isEmpty(this.FilterFormData.StartTime) && Number(data.value) < Number(this
							.FilterFormData
							.StartTime)) {
						return uni.showToast({
							title: '结束时间不能低于开始时间',
							icon: 'none'
						});
					}
					this.FilterFormData.EndTime = data.value;
				}
				this.showTimePicker = false;
			},
			OpenFilter() { // 打开筛选
				let that = this;
				this.FilterPopup = true;

			},
			closeFilterPopup() {
				this.FilterPopup = false;
			},
			ChoiceTime(type) { // 点击时间
				var that = this;
				this.TimeType = type;
				let dates = new Date();
				if (type == 'start') {
					if (!that.Request.isEmpty(that.FilterFormData.StartTime)) {
						dates = that.FilterFormData.StartTime;
					}
					that.DatetimeData = Number(dates);
					this.PickerTitle = '开始时间';
				} else if (type == 'end') {
					if (!that.Request.isEmpty(that.FilterFormData.EndTime)) {
						dates = that.FilterFormData.EndTime;
					}
					that.DatetimeData = Number(dates);
					this.PickerTitle = '结束时间';
				} else {
					that.DatetimeData = Number(new Date());
					this.PickerTitle = '';
				}

				that.showTimePicker = true;
			},
			dateFormat(val) { // 格式化时间
				var that = this;
				if (!that.Request.isEmpty(val)) {
					return that.Request.dateFormat(new Date(val), 'Y-MM-dd');
				} else {
					// return '请选择'
					// return that.Request.dateFormat(new Date(), 'Y-MM-dd');
					return ''
				}
			},
			ResetFilterBtn() {
				this.searchValue = '';
				Object.keys(this.FilterFormData).forEach(item => {
					this.FilterFormData[item] = '';
				})
				this.FilterNums = null;
				this.OnSearch();
				this.closeFilterPopup();
			},
			ComfirmFilterBtn() {
				let FilterNums = null;

				if (this.FilterFormData.StartTime || this.FilterFormData.EndTime) {
					FilterNums = 1;
				}
				this.FilterNums = FilterNums;

				this.OnSearch();
				this.closeFilterPopup();
			},
		}
	}
</script>


<style lang="scss">
	.content {
		background-color: #eeeeee;
		height: 100vh;
	}

	.SearchBox {
		background-color: #fff;
		background-color: #51d0d0;
		padding: 6px 10px;
	}

	// 筛选弹层
	.FilterMainBox {
		padding: 20rpx 30rpx !important;
		flex: 1;
		overflow: auto;
		padding-bottom: 20px;

		.TitleBox {
			font-size: 14px;
			margin-bottom: 20rpx;
		}

		// 时间选择样式
		.Select_Box {
			flex: 1;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-evenly;

			.Select_Date {
				justify-content: space-between;
				padding: 6px 12px;
				background-color: #f0f0f0;
				border: 1px solid #f0f0f0;
				border-radius: 9999px;
				width: 46%;
				margin-top: 8px;
			}

			.Select_Date_Active {
				background-color: #e1f7f8 !important;
				border: 1px solid #51d0d0 !important;
				color: #51d0d0 !important;
			}

			// 起止时间
			.ChoiceTimesBox {
				width: 100%;
				display: flex;
				align-items: center;
				// background-color: #fff;
				padding: 10px 20px;
				margin-top: 6px;

				.TimeBox {
					// flex: 1;
					// display: flex;
					// align-items: center;
					// justify-content: space-evenly;
					// margin-left: 10px;

					.timer {
						width: 100%;
						flex: 2;
						display: flex;
						flex-direction: column;
						// align-items: center;
						font-size: 16px;
						color: #333;

						text:first-child {
							margin-bottom: 10px;
							font-weight: 600;
						}

						text:last-child {
							height: 20px;
						}

						.Date_Text {
							color: #999;
						}
					}

					.Icon {
						flex: 1;
					}
				}
			}

		}


	}


	.MainBox {
		padding: 0px 2px;
		flex: 1;
		overflow: auto;
	}

	.PopupBottomBox {
		justify-content: space-evenly;
		padding: 8rpx 8rpx;
		border-top: 1px solid #ececec;

		button {
			width: 44%;

			&:first-child {
				background-color: #fff;
				color: #51d0d0;
				border: 1px solid #51d0d0;
			}

			&:last-child {
				background-color: #51d0d0;
				color: #fff;
			}
		}
	}

	// 时间选择器
	.DateTimerPick {

		.u-transition {
			z-index: 9999999 !important;
		}
	}

	// 顶部tab栏
	.TabsBox {
		padding: 10px 15px;
		background-color: #fff;
		border-bottom: 2px solid #eee;

		.u-tabs__wrapper__nav__item__text {
			padding: 4px 10px !important;
		}
	}
</style>